<template>
  <b-page class="y-home-lbsq">
    <div class="y-home-lbsq-left">
      <div class="data-show">
        <div class="total-data">
          <div class="total-data-content">
            <img class="lbsq-data-img content-bg-one" src="../../assets/home/group_fill.png"/>
            <div class="lbsq-data-name">总参与人数</div>
            <div class="lbsq-data-num">{{ totalData.join }}</div>
          </div>
          <div class="total-data-content">
            <img class="lbsq-data-img content-bg-one" src="../../assets/home/addressbook_fill.png"/>
            <div class="lbsq-data-name">今日参与人数</div>
            <div class="lbsq-data-num">{{ todayData.join }}</div>
          </div>
          <div class="total-data-content">
            <img class="lbsq-data-img content-bg-one" src="../../assets/home/task_fill.png"/>
            <div class="lbsq-data-name">任务数</div>
            <div class="lbsq-data-num">{{ gameTotalTask }}</div>
          </div>
        </div>
        <div class="total-data">
          <div class="total-data-content">
            <img class="lbsq-data-img content-bg-two" src="../../assets/home/people_fill.png"/>
            <div class="lbsq-data-name">总净增粉丝</div>
            <div class="lbsq-data-num">{{ totalData.netFollow }}</div>
          </div>
          <div class="total-data-content">
            <img class="lbsq-data-img content-bg-two" src="../../assets/home/red.png"/>
            <div class="lbsq-data-name">今日净增粉丝</div>
            <div class="lbsq-data-num">{{ todayData.netFollow }}</div>
          </div>
          <div class="total-data-content">
            <img class="lbsq-data-img content-bg-two" src="../../assets/home/select_fill.png"/>
            <div class="lbsq-data-name">今日完成任务</div>
            <div class="lbsq-data-num">{{ todayData.join }}</div>
          </div>
        </div>
      </div>
      <div class="game-type-show">
        <div class="game-type-show-title"> 常用功能</div>
        <div class="game-type-show-list">
          <div class="game-type-show-item-warp" v-for="(item,index) in typeList" :key="index">
            <div class="game-type-show-item" :style="{background:item.bg}">

              <img style="width: 80px;height: 80px;flex-shrink: 0;" :src="item.img">

              <div class="game-type-content">
                <div class="game-type-name">{{ item.title }}</div>
                <div class="game-type-desc">{{ item.desc }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="y-home-lbsq-right">
      <div class="y-home-user-code">
        <div class="user-title">扫码关注</div>
        <div>
          <div style="margin-top: 16px;font-size: 20px;color: #101010;;text-align: center">- 必火互动公众号 -</div>
          <div style="margin: 16px auto 0;width: 140px;height: 140px;background: #ff5f5f;">
            <img style="width: 100%;height: 100%" src="../../assets/home/gzh.jpg"/>
          </div>
          <div style="margin-top: 16px;font-size: 16px;color: #101010;;text-align: center">扫一扫随时关注</div>
          <div style="margin-top: 8px;font-size: 18px;color:#378BFB;text-align: center;line-height: 28px">
            线上招生、拓客、做活动<br/>超多营销爆款方案
          </div>
        </div>
      </div>
      <div class="y-home-user-service">
        <div class="user-title">必火专属客服</div>
        <div style="display: flex;flex-direction: column;align-items: center">
          <div style="margin-top: 20px;width: 140px;height: 140px;background: #ff5f5f">
            <img style="width: 100%;height: 100%" src="../../assets/home/客服.jpg"/>
          </div>
          <div style="margin-top: 12px">扫一扫领取不定期福利</div>
        </div>
      </div>
    </div>
  </b-page>
</template>

<script>
    // import API from 'src/api/gameData'
    import qmpt from '@/perm/assets/home/1.png'
    import zxbm from '@/perm/assets/home/2.png'
    import cjdt from '@/perm/assets/home/3.png'
    import fxhd from '@/perm/assets/home/4.png'
    import rwb from '@/perm/assets/home/5.png'
    import gzhfsgl from '@/perm/assets/home/6.png'
    // import TASK_API from '../../api/game-task'
    export default {
        name: 'HomeLbsq',
        data () {
            return {
                joinTotal: {},
                typeList: [{ title: '全民拼团', bg: '#F4F2FF', desc: '这里是全民拼团文字简介最多显示3行超出不显示出来。', img: qmpt },
                    { title: '在线报名', bg: '#EAFFD5', desc: '这里是全民拼团文字简介最多显示3行超出不显示出来。', img: zxbm },
                    { title: '超级答题', bg: '#FCEFFF', desc: '这里是全民拼团文字简介最多显示3行超出不显示出来。', img: cjdt },
                    { title: '分销活动', bg: '#FFFAE3', desc: '这里是全民拼团文字简介最多显示3行超出不显示出来。', img: fxhd },
                    { title: '任务宝', bg: '#FFF2DB', desc: '这里是全民拼团文字简介最多显示3行超出不显示出来。', img: rwb },
                    { title: '公众号粉丝管理', bg: '#ECF7FF', desc: '这里是全民拼团文字简介最多显示3行超出不显示出来。', img: gzhfsgl },
                    { title: '全民拼团', bg: '#F4F2FF', desc: '这里是全民拼团文字简介最多显示3行超出不显示出来。', img: qmpt }],
                todayData: {},
                totalData: {},
                gameTotalTask: null
            }
        },
        mounted () {
            this.init()
        },
        methods: {
            init () {
                // API.todayMap({ gameId: '', mpId: '' }).then(res => {
                //     this.todayData = Object.assign({}, res)
                // })
                // API.totalMap({ gameId: '', mpId: '' }).then(res => {
                //     this.totalData = Object.assign({}, res)
                // })
                // TASK_API.gameCount().then(res => {
                //     this.gameTotalTask = res
                // })
            }
        }
    }
</script>

<style lang="less">
    .y-home-lbsq {
        position: relative;
        padding-right: 315px;
        height: 100%;
        overflow: auto;
        background: #f5f5f5;

        .ant-card-body {
            padding: 0px;
            zoom: 1;
        }

        .y-home-lbsq-left {
            min-width: 700px;

            .data-show {
                display: flex;

                .total-data {
                    display: flex;
                    justify-content: space-around;
                    align-items: center;
                    width: 100%;
                    height: 210px;
                    background: white;
                }

                .total-data + .total-data {
                    margin-left: 15px;
                }

                .total-data-content {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;

                    .content-bg-one {
                        background: #E4F4FF;

                    }

                    .content-bg-two {
                        background: #FFF2F3;

                    }

                    .lbsq-data-img {
                        width: 78px;
                        height: 78px;
                        border-radius: 50%;
                        border: 1px solid rgba(255, 255, 255, 0);
                    }

                    .lbsq-data-name {
                        margin-top: 15px;
                        font-size: 18px;
                        color: #747E88;
                    }

                    .lbsq-data-num {
                        margin-top: 5px;
                        font-size: 28px;
                        color: #434E6B;
                    }
                }
            }
        }

        .game-type-show {
            margin-top: 15px;
            padding: 20px 25px;
            min-width: 700px;
            min-height: 520px;
            background: white;

            .game-type-show-title {
                font-size: 18px;
                color: #101010;
            }

            .game-type-show-list {
                margin-top: 30px;
                display: flex;
                flex-wrap: wrap;

                .game-type-show-item-warp {
                    margin: 0 20px 30px 0;
                    width: 330px;
                    height: 146px;
                }

                .game-type-show-item {
                    padding: 25px 22px;
                    display: flex;
                    height: 146px;
                    flex-shrink: 1;
                    flex-grow: 0;

                    .game-type-content {
                        margin-left: 28px;

                        .game-type-name {
                            font-size: 20px;
                            color: #283542;
                            font-weight: bold;
                        }

                        .game-type-desc {
                            margin-top: 5px;
                            font-size: 16px;
                            line-height: 20px;
                            height: 60px;
                            overflow: hidden;
                            color: #A7A7A8;
                        }
                    }
                }
            }
        }

        .y-home-lbsq-right {
            position: absolute;
            top: 0;
            right: 0;
            width: 300px;

            .y-home-user-data {
                padding: 15px 10px;
                display: flex;
                height: 93px;
                justify-content: space-between;
                background: white;

                .data-item {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                }

                .user-item-content {
                    font-size: 18px;
                    color: #378BFB;
                }

                .user-item-num {
                    font-size: 16px;
                    color: #747E88;
                }
            }

            .user-title {
                font-size: 18px;
                color: #101010;
                font-weight: bold;
            }

            .y-home-user-code {
                padding: 17px 22px;
                height: 360px;
                background: white;
            }

            .y-home-user-service {
                margin-top: 15px;
                padding: 17px 22px;
                height: 368px;
                background: white;
            }

        }

    }
</style>
